{% extends "base.html" %}

{% block title %}智能问答 - 红楼梦数据分析{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>红楼梦智能问答</h2>
        <p>基于阿里云百炼大模型 qwen3-coder，为您提供关于《红楼梦》的智能问答服务</p>
        
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">提问区</h5>
                <div class="mb-3">
                    <label for="questionInput" class="form-label">请输入您的问题：</label>
                    <textarea class="form-control" id="questionInput" rows="3" placeholder="例如：请简述贾宝玉和林黛玉的关系"></textarea>
                </div>
                <button id="askButton" class="btn btn-danger" onclick="askQuestion()">提问</button>
                <button id="clearButton" class="btn btn-secondary" onclick="clearQuestion()">清空</button>
            </div>
        </div>
        
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">回答区</h5>
                <div id="answerArea" class="border p-3" style="min-height: 200px; background-color: #f8f9fa;">
                    <p class="text-muted">您的问题回答将显示在这里...</p>
                </div>
            </div>
        </div>
        
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">常见问题示例</h5>
                <div class="row">
                    <div class="col-md-6">
                        <ul>
                            <li>贾宝玉和林黛玉是什么关系？</li>
                            <li>薛宝钗的性格特点是什么？</li>
                            <li>王熙凤在贾府中扮演什么角色？</li>
                            <li>《红楼梦》的主要情节线索有哪些？</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul>
                            <li>大观园在《红楼梦》中有什么意义？</li>
                            <li>贾母在贾府中的地位如何？</li>
                            <li>《红楼梦》反映了什么样的社会现实？</li>
                            <li>曹雪芹的写作风格有什么特点？</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function askQuestion() {
    const question = document.getElementById('questionInput').value;
    if (!question.trim()) {
        alert('请输入问题');
        return;
    }
    
    // 显示加载状态
    document.getElementById('answerArea').innerHTML = '<p class="text-muted">正在思考中...</p>';
    document.getElementById('askButton').disabled = true;
    
    // 发送请求到后端API
    fetch('/api/ask', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({question: question})
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('answerArea').innerHTML = `<p>${data.answer}</p>`;
        document.getElementById('askButton').disabled = false;
    })
    .catch(error => {
        document.getElementById('answerArea').innerHTML = `<p class="text-danger">回答出错: ${error.message}</p>`;
        document.getElementById('askButton').disabled = false;
    });
}

function clearQuestion() {
    document.getElementById('questionInput').value = '';
    document.getElementById('answerArea').innerHTML = '<p class="text-muted">您的问题回答将显示在这里...</p>';
}
</script>
{% endblock %}